<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>旅馆系统</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="public/layui/css/layui.css"/>
    <link rel="stylesheet" href="css/mycss.css"/>
    <script src="public/layui/layui.js"/>
<!--    <script src="../../public/jquery-3.5.1.js"></script>-->
    <style>
        html{
            height: 100%;
        }

        body{
            height: 100%;
            overflow-x:hidden;
            /*overflow-y:hidden;*/
        }
    </style>
</head>
<body>
<ul class="layui-nav center">
    <li class="layui-nav-item">
        <a href="index/homepage" class="layui-this" target="client">首页</a>
    </li>
    <li class="layui-nav-item">
        <a href="index/order" target="client">定房记录</a>
    </li>
    <li class="layui-nav-item">
        <a><img src="//t.cn/RCzsdCq" class="layui-nav-img"/>我</a>
        <dl class="layui-nav-child">
            <dd><a id="updatePwd">修改密码</a></dd>
            <dd><a id="exit" href="user/logout">退出</a></dd>
        </dl>
    </li>
</ul>
<iframe name="client">

</iframe>
<div style="display: none;padding: 20px" id="update">
    <form action="#" class="layui-form" lay-filter="dataForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">原密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="oldPassword" autocomplete="off" lay-verify="required" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">新密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="newPassword" autocomplete="off" lay-verify="required" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">确认密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="reNewPassword" autocomplete="off" lay-verify="required" class="layui-input"/>
                </div>
            </div>
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div class="blank">
</div>
<script>
    layui.use(['carousel','element','layer','jquery','table', 'form'], function(){
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        let layer = layui.layer;
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;

        //监听提交
        form.on('submit(sub)', function(data){
            let oldPassword = data.field.oldPassword;
            let newPassword = data.field.newPassword;
            let reNewPassword = data.field.reNewPassword;
            if (newPassword !== reNewPassword) {
                layer.msg('两次密码不一致');
                return false;
            }
            $.ajax({
                url: 'user/update/password',
                type: 'POST',
                dataType: 'json',
                data: {
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
                success(res) {
                    if (res.code === 200) {
                        layer.msg('修改密码成功');
                    }else {
                        layer.msg('修改密码失败');
                    }
                }
            });
            return false;
        });


        $("#updatePwd").click(function () {
            updatePwd();
        });

        $("#bookRecord").click(function () {
            showLast();
        });

        function updatePwd() {
            layer.open({
                type: 1,
                title: '修改密码',
                content: $('#update'),
                area: ['450px'],
                skin: 'layui-layer-molv'
            });
        }

        function showLast() {
            layer.open({
                type: 1,
                title: '借书记录',
                content: $('#showBook'),
                area: ['600px'],
                skin: 'layui-layer-molv'
            });
        }
    });



</script>
</body>
</html>